<template>
  <contentModel v-if="modelValue" title="编辑" @close="cancel">
    <a-form
      ref="formRef"
      layout="vertical"
      :model="form"
      auto-label-width
      :rules="rules"
    >
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item field="secretLevel" label="密级">
            <secretLevelSelect v-model="form.secretLevel" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="billNo" label="到货登记号">
            <a-input v-model="form.billNo" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="pmsArriveDate" label="预计到货日期">
            <a-date-picker
              v-model="form.pmsArriveDate"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              show-time
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item field="deliverType" label="到货类型">
            <dict-select
              v-model="form.deliverType"
              allow-clear
              dict-type="receiveType"
              placeholder="请选择"
            ></dict-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="mdsVendorId" label="供应商">
            <a-input v-model="form.mdsVendorId" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="editUserCode" label="登记人">
            <searchItemUser
              v-model="form.editUserCode"
              v-model:name="form.editUserName"
              :title="'登记人'"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item field="editDate" label="登记日期">
            <a-date-picker
              v-model="form.editDate"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              show-time
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!-- EditTable -->
    <EditTable></EditTable>
    <template #header-right>
      <a-space>
        <a-button type="outline" @click="handleCancel(record, rowIndex)"
          >取消</a-button
        >
        <a-button
          type="primary"
          :loading="loading"
          @click="handleSubmit(record, rowIndex)"
          >保存</a-button
        >
      </a-space>
    </template>
  </contentModel>
</template>

<script lang="ts" setup>
  import { defineAsyncComponent, reactive, ref, toRefs } from 'vue';
  import dictSelect from '@/common/components/dict-select/index.vue';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';
  import searchItemUser from '@/common/components/search-modal/user.vue';
  import { Message } from '@arco-design/web-vue';
  import {
    savePmsReceive,
    editPmsReceive,
    getPmsReceiveDetailInfoById,
  } from '@/api/purchaseArrival/arrivalRegistration';
  import EditTable from './EditTable.vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-prop-types
    selectId: {},
  });
  const emits = defineEmits(['update:modelValue']);
  const cancel = () => {
    emits('update:modelValue', false);
  };
  const { selectId } = toRefs(props);
  // const { cancel } = useModelFun();
  const formRef = ref(null);
  const loading = ref(false);
  const form = reactive({});
  const rules = {
    billNo: [
      {
        required: true,
        message: '发货日期必填',
      },
    ],
    mdsVendorId: [
      {
        required: true,
        message: '供应商必填',
      },
    ],
    editDate: [
      {
        required: true,
        message: '登记日期必填',
      },
    ],
  };
  const handleSubmit = () => {
    formRef.value.validate(async (validate) => {
      if (!validate) {
        loading.value = true;
        if (form?.id) {
          await editPmsReceive(form);
          Message.success({
            content: '编辑成功！',
            duration: 5 * 1000,
          });
        } else {
          await savePmsReceive(form);
          Message.success({
            content: '保存成功！',
            duration: 5 * 1000,
          });
        }
        loading.value = false;
        cancel();
      }
    });
  };
  // const handleOk = () => {
  //   cancel();
  // };
  const handleCancel = () => {
    cancel();
  };
  const getDetailInfo = async () => {
    const { data } = await getPmsReceiveDetailInfoById(selectId?.value);
    Object.keys(data).forEach((key) => {
      form[key] = data[key];
    });
  };
  const init = () => {
    if (selectId?.value) {
      getDetailInfo();
    }
  };

  init();
</script>
